<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增博客标题题')"/>
    <th:block th:include="include :: datetimepicker-css"/>
    <th:block th:include="include :: bootstrap-select-css" />
    <th:block th:include="include :: markdown-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-post-edit">

        <div class="col-lg-8" >

            <!--            博客id-->
            <input name="id" th:field="*{mtoPost.id}" type="hidden">

            <!--            标题-->
            <div class="form-group">
                <h3>
                    <input type="text" class="form-control" id="title" name="title" th:value="${mtoPost?.title}"
                       placeholder="请输入文章标题" required>
                </h3>
            </div>

            <!--markdown编辑器-->
            <div class="form-group">
                <div id=md-content>
                    <textarea id="content" name="content" th:text="${mtoPost?.content}"></textarea>
                </div>
            </div>

        </div>

        <div class="col-lg-4 p-3" style="border-radius: 4px;">
            <!--       博客导航     -->
            <div class="form-group">
                <label class="control-label">博客导航：</label>
                <select class="form-control " data-placeholder="请选择导航" id="categoryId" name="categoryId">
                    <option value="">请选择导航</option>
                    <block th:each="category:${categoryList}">

                        <option
                                th:if="${#lists.isEmpty(category.children) && category.type ==0}"
                                th:value="${category.id}"
                                th:text="${category.name}"
                                th:selected="${mtoPost?.categoryId == category.id}"
                        ></option>

                        <optgroup th:unless="${#lists.isEmpty(category.children)}"
                                  th:label="${category.name}">
                            <option th:each="child: ${category.children}"
                                    th:value="${child.id}"
                                    th:text="${child.name}"></option>
                        </optgroup>
                    </block>
                </select>
<!--                <select class="form-control" data-placeholder="请选择导航" id="categoryId" name="categoryId">-->
<!--                    <block th:each="category:${categoryList}">-->
<!--                        <option value="">请选择</option>-->
<!--                        <option-->
<!--                                th:if="${#lists.isEmpty(category.children) }"-->
<!--                                th:value="${category.id}"-->
<!--                                th:text="${category.name}"-->
<!--                                th:selected="${mtoPost?.categoryId == category.id}"-->
<!--                        ></option>-->

<!--                        <optgroup th:unless="${#lists.isEmpty(category.children)}"-->
<!--                                  th:label="${category.name}">-->
<!--                            <option th:each="child: ${category.children}"-->
<!--                                    th:value="${child.id}"-->
<!--                                    th:text="${child.name}"-->
<!--                                    th:selected="${mtoPost?.categoryId == category.id}"></option>-->
<!--                        </optgroup>-->
<!--                    </block>-->
<!--                </select>-->
            </div>

            <!--        博客栏目    -->
            <div class="form-group">
                <label class=" control-label is-required">博客栏目：</label>
                <select class="form-control  noselect2 selectpicker" data-placeholder="请选择栏目" id="channelId"
                        name="channelId"
                        required>
                    <option value="">请选择</option>
                    <option th:each="channel:${channelList}"
                            th:value="${channel.id}"
                            th:text="${channel.name}"
                            th:selected="${mtoPost?.channelId}==${channel.id}"
                    ></option>
                </select>
            </div>

            <!--      博客标签      -->
            <div class="form-group ">
                <label class=" control-label">博客标签：</label>
                <select id="tag" class="form-control noselect2 selectpicker" data-none-selected-text="请选择开发语言" multiple>
                    <option th:each="tag:${tagList}"
                            th:value="${tag.id}"
                            th:text="${tag.name}"
                            th:selected="${mtoPost.tags.contains(tag.name)}"
                    ></option>
                </select>
<!--                <select id="tag" class="form-control select2-multiple" multiple>-->
<!--                    <option th:each="tag:${tagList}"-->
<!--                            th:value="${tag.name}"-->
<!--                            th:text="${tag.name}"-->
<!--                            th:selected="${mtoPost.tags.contains(tag.name)}"-->
<!--                    ></option>-->
<!--                </select>-->
            </div>

            <!--       文章摘要     -->
            <div class="form-group ">
                <label class="control-label">博客摘要：</label>
                <div class="ml-3">
                    <textarea type="text" name="summary" maxlength="500" class="form-control" rows="5"
                              th:text="${mtoPost?.summary}"
                              placeholder="博客摘要"></textarea>
                </div>
            </div>

            <!--     是否轮播       -->
            <div class="form-group ">
                <label class="control-label is-required">是否轮播：</label>
                <div class="ml-3">
                    <label class="radio-box">
                        <input name="slider" type="radio" id=0 value=0 required
                               th:field="*{mtoPost.slider}"
                               th:checked="true"> 否</input>
                    </label>
                    <label class="radio-box">
                        <input name="slider" type="radio" id=1 value="1"
                               th:field="*{mtoPost.slider}"
                               required> 是 </input>
                    </label>
                </div>
            </div>

            <!--       是否推荐     -->
            <div class="form-group ">
                <label class=" control-label is-required">是否推荐：</label>
                <div class="ml-3">
                    <label class="radio-box">
                        <input name="featured" type="radio" id=0 value=0 required th:checked="true"
                               th:field="*{mtoPost.featured}"> 否</input>
                    </label>
                    <label class="radio-box">
                        <input name="featured" type="radio" id=1 value="1" required th:field="*{mtoPost.featured}">
                        是 </input>
                    </label>
                </div>
            </div>

            <!--       是否推荐     -->
            <div class="form-group ">
                <label class=" control-label is-required">状态：</label>
                <div class="ml-3">
                    <label class="radio-box">
                        <input name="status" type="radio" id=0 value=0 required th:checked="true"
                               th:field="*{mtoPost.status}">发布</input>
                    </label>
                    <label class="radio-box">
                        <input name="status" type="radio" id=1 value="1" required th:field="*{mtoPost.status}">
                        草稿 </input>
                    </label>
                </div>
            </div>

            <div class="form-group ">
                <label class="control-label">博客封面：</label>
                <div class="ml-3">
                    <input name="thumbnail" id="thumbnail" th:field="*{mtoPost.thumbnail}" class="form-control">
                    <a id="url"><img th:src="${not #strings.isEmpty(mtoPost.thumbnail) ? mtoPost.thumbnail : '#'}"
                                     style="width: 90px;height: 90px"></a>
                    <input type="file" id="tpicf">
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-offset-5 col-sm-10">

                <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i
                        class="fa fa-check"></i>保 存
                </button>&nbsp;
                <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i
                        class="fa fa-reply-all"></i>关 闭
                </button>
            </div>
        </div>
    </form>
</div>

<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>
<th:block th:include="include :: bootstrap-select-js" />
<th:block th:include="include :: markdown-js"/>

<script th:inline="javascript">

    var prefix = ctx + "mto/post"

    var editor;

    $(function () {

        // editormd配置
        editor = editormd("md-content", {
            width: "100%",
            height: 700,
            syncScrolling: "single",
            path: "/blog/editormd/lib/",
            // 开启工具栏 (默认为true)
            toolbar: true,
            // 指定工具栏
            toolbarIcons: function () {
                return ["undo", "redo", "|",
                    "list-ul", "list-ol", "|",
                    "bold", "del", "hr", "|",
                    "table", "image", "|",
                    "||", "watch", "preview", "search"]
            },
            // 开始图片上传
            imageUpload: true,
            // 上传图片的格式
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            // 上传路径
            imageUploadURL: "/common/markdown/upload",
            // 图片上传成功后，可以做点什么
            onload: function () {
            },
            // 关闭实时预览
            watch: false,
            //预览主题
            // previewTheme: "dark",
            //编辑主题
            // editorTheme: "pastel-on-dark",
            // 开启科学公式TeX语言支持，默认关闭
            tex : true,
            // 开启流程图支持，默认关闭
            flowChart : true,
            // 开启时序/序列图支持，默认关闭,
            sequenceDiagram : true,
            /*工具栏置顶*/
            toolbarAutoFixed: true,

        });

        //监听粘贴
        document.addEventListener('paste', function (event) {
            var items = (event.clipboardData || window.clipboardData).items;
            var file = null;
            if (items && items.length) {
                // 搜索剪切板items
                for (var i = 0; i < items.length; i++) {
                    if (items[i].type.indexOf('image') !== -1) {
                        file = items[i].getAsFile();
                        break;
                    }
                }
            } else {
                alert("当前浏览器不支持");
                return;
            }
            if (!file) {
                return;
            }
            // 此时file就是我们的剪切板中的图片对象
            // 这里是上传
            var xhr = new XMLHttpRequest();
            // 上传结束
            xhr.onload = function () {

            };
            xhr.onerror = function () {
                alert("网络异常，上传失败!");
            };
            var formData = new FormData();
            formData.append("editormd-image-file", file);
            xhr.open('POST', '/common/markdown/upload', true);
            xhr.send(formData);
            xhr.onreadystatechange = function () {
                if(xhr.readyState === 4){
                    if(xhr.status >=200 && xhr.status < 300 || xhr.status === 304){
                        //5.处理返回的结果
                        var obj = xhr.responseText;
                        var objarr = eval("("+obj+")");
                        if (objarr["success"] == 1){
                            editor.insertValue("![](" + objarr["fileName"] + ")");
                        }else{
                            alert("粘贴图片失败!");
                        }
                    }
                }
            }
        });
    });

    $("#form-post-add").validate({
        focusCleanup: true
    });

    function submitHandler() {
        debugger;
        if ($.validate.form()) {
            var data = $("#form-post-edit").serializeArray();
            debugger;
            var tags = $.form.selectSelects("tag");
            data.push({"name": "tags", "value": tags});
            // data.push({"name": "thumbnail", "value": thumbnail});
            $.operate.saveTab(prefix + "/edit", data);
        }
    };


    $("input[name='created']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });

    $().ready(function () {
        var single = [[${channelId}]];
        $("#channelId option[value= " + single + "]").prop("selected", true);
    });

    $(function () {
        $('#tag').select2({
            placeholder: "请选择标签",
            allowClear: true
        });
    })


    $("#tpicf").change(function () {
        var data = new FormData();
        data.append("editormd-image-file", $("#tpicf")[0].files[0]);
        $.ajax({
            type: "post",
            url: ctx + "common/blog/blogPicture",
            data: data,
            cache: false,
            contentType: false,
            processData: false,
            dataType: 'json',
            success: function (result) {
                if (result.code == web_status.SUCCESS) {
                    $("#url img").attr("src", result.fileName)
                    $("#thumbnail").val(result.fileName)
                }
            },
            error: function (error) {
                alert("图片上传失败。");
            }
        });
    })

</script>
</script>
</body>
</html>
